
import React,{ useEffect,useState } from "react";
import "./add.less";
import { Button, Checkbox, Form, Input } from "antd";
import Title from "../../components/Title/Title";
import { changePassword, getAccountinfo  } from "../../api/account";
import { useNavigate } from 'react-router-dom';


const SubmitButton = ({ form, children }) => {
  const [submittable, setSubmittable] = React.useState(false);
  const values = Form.useWatch([], form);
  useEffect(() => {
      form.validateFields({
          validateOnly: true,
      })
          .then(() => setSubmittable(true))
          .catch(() => setSubmittable(false));
  }, [form, values]);

  return (
      <Button type="primary" htmlType="submit" disabled={!submittable}>
          {children}
      </Button>
  );
};
export default function Update() {
  const navigate = useNavigate()
  const onFinish = async (values) => {
      let { id } = JSON.parse(localStorage.getItem("user"));
      getAccountinfo({ id: id }).then((res) => {
          console.log(res.data);
      });
      let data = { ...values, id }
      let res = await changePassword(data);
      console.log(id);
      console.log(res.data);
      let { code, msg } = res.data;
      if (code == 0) {
          // 跳转登录页
          navigate("/");
      }
  }
  const [form] = Form.useForm();
  return (
    <>
      <div className="include">
        <div className="add">
        <Title title = '修改密码'></Title></div>
        <Form
         form={form}
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 24,
          }}
          name="basic"
          style={{
            maxWidth: 1600,
          }}
 
          onFinish={onFinish}
        >
          <Form.Item
            label="原密码"
            name="oldPwd"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input placeholder="请输入原密码" />
          </Form.Item>

          <Form.Item
            label="新密码"
            name="newPwd"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password placeholder="请输入新密码"/>
          </Form.Item>
          <Form.Item
            label="确认新密码"
            name="newPwd"
            rules={[
              {
                required: true,
                message: "Please again input your  password!",
              },
            ]}
          >
            <Input.Password  placeholder="请输入新密码" />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
                            
            <SubmitButton form={form} type="primary"  className="modify">
              立即修改
            </SubmitButton>
            <Button htmlType="reset" type ="default">重置</Button>
          </Form.Item>
        </Form>
        ;
      </div>
    </>
  );
}
